<template>
  <Layout>
    <PageHeader :title="title"></PageHeader>
    <div class="row">
      <div class="col-md-3" v-for="(data, index) in statData" :key="index">
        <div class="card">
          <div class="card-body">
            <div class="media">
              <div class="media-body overflow-hidden" style="text-align:center;">
                <p class="text-truncate font-size-14 mb-2">{{data.title}}</p>
                <h4 class="mb-0">{{data.value}}</h4>
              </div>
              <!-- <div class="text-primary">
                <i :class="`${data.icon} font-size-24`"></i>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xl-3">
        <div class="card">
          <div class="card-body" style="height:464px;">
            <h5 class="font-size-14 mb-3">Categories</h5>

            <div id="accordion" class="custom-accordion categories-accordion mb-3">
              <div class="categories-group-card">
                <a v-b-toggle.electorinic class="categories-group-list">
                  <i class="mdi mdi-desktop-classic font-size-16 align-middle mr-2"></i> 接口列表
                  <i class="mdi mdi-minus float-right accor-plus-icon"></i>
                </a>

                <b-collapse id="electorinic" data-parent="#accordion" accordion="my-accordion">
                  <div>
                    <ul class="list-unstyled categories-list mb-0">
                      <li>
                        <a href="#">
                          <i class="mdi mdi-circle-medium mr-1"></i> Mobile
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <i class="mdi mdi-circle-medium mr-1"></i> Mobile accessories
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <i class="mdi mdi-circle-medium mr-1"></i> Computers
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <i class="mdi mdi-circle-medium mr-1"></i> Laptops
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <i class="mdi mdi-circle-medium mr-1"></i> Speakers
                        </a>
                      </li>
                    </ul>
                  </div>
                </b-collapse>
              </div>

              <div class="categories-group-card">
                <a
                  v-b-toggle.fashion
                  class="categories-group-list"
                  data-toggle="collapse"
                  aria-expanded="true"
                  aria-controls="collapseTwo"
                >
                  <i class="mdi mdi-hanger font-size-16 align-middle mr-2"></i> 资讯列表
                  <i class="mdi mdi-minus float-right accor-plus-icon"></i>
                </a>
                <b-collapse id="fashion" visible data-parent="#accordion" accordion="my-accordion">
                  <div>
                    <ul class="list-unstyled categories-list mb-0">
                      <li class="active">
                        <a href="#">
                          <i class="mdi mdi-circle-medium mr-1"></i> Clothing
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <i class="mdi mdi-circle-medium mr-1"></i> Footwear
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <i class="mdi mdi-circle-medium mr-1"></i> Watches
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <i class="mdi mdi-circle-medium mr-1"></i> Sportswear
                        </a>
                      </li>
                    </ul>
                  </div>
                </b-collapse>
              </div>

              <div class="categories-group-card">
                <a
                  v-b-toggle.kids
                  class="categories-group-list collapsed"
                  data-toggle="collapse"
                  aria-expanded="false"
                  aria-controls="collapseThree"
                >
                  <i class="mdi mdi-pinwheel-outline font-size-16 align-middle mr-2"></i> Baby & Kids
                  <i class="mdi mdi-minus float-right accor-plus-icon"></i>
                </a>
                <b-collapse id="kids" data-parent="#accordion" accordion="my-accordion">
                  <div>
                    <ul class="list-unstyled categories-list mb-0">
                      <li>
                        <a href="#">
                          <i class="mdi mdi-circle-medium mr-1"></i> Clothing
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <i class="mdi mdi-circle-medium mr-1"></i> Footwear
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <i class="mdi mdi-circle-medium mr-1"></i> Toys
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <i class="mdi mdi-circle-medium mr-1"></i> Baby care
                        </a>
                      </li>
                    </ul>
                  </div>
                </b-collapse>
              </div>

              <div class="categories-group-card">
                <a
                  v-b-toggle.Fitness
                  class="categories-group-list collapsed"
                  data-toggle="collapse"
                  aria-expanded="false"
                  aria-controls="collapseFour"
                >
                  <i class="mdi mdi-dumbbell font-size-16 align-middle mr-2"></i> Fitness
                  <i class="mdi mdi-minus float-right accor-plus-icon"></i>
                </a>
                <b-collapse id="Fitness" data-parent="#accordion" accordion="my-accordion">
                  <div>
                    <ul class="list-unstyled categories-list mb-0">
                      <li>
                        <a href="#">
                          <i class="mdi mdi-circle-medium mr-1"></i> Gym equipment
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <i class="mdi mdi-circle-medium mr-1"></i> Yoga mat
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <i class="mdi mdi-circle-medium mr-1"></i> Dumbbells
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <i class="mdi mdi-circle-medium mr-1"></i> Protein supplements
                        </a>
                      </li>
                    </ul>
                  </div>
                </b-collapse>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-9">
        <div class="row">
          <div class="col-lg-12">
            <div class="form-group">
              <div style="display:flex;align-items: center;justify-content: space-between;margin-bottom: .5rem;">
                <label style="margin-bottom:0;" for="productname">接口名称</label>
                <div>
                  <b-button style="margin-right: 20px;" size="sm" variant="primary">运行</b-button>
                  <b-button size="sm" variant="primary">保存</b-button>
                </div>
              </div>
              <b-form-input
                for="text"
                v-model="interfaceName"
                placeholder="请输入接口名称"
              ></b-form-input>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-3">
            <div class="form-group">
              <label for="productname">数据源列表</label>
              <multiselect
                v-model="cooperation"
                :options="dataSource"
                placeholder="数据源列表"
              ></multiselect>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="form-group">
              <label for="productname">请求类型</label>
              <multiselect
                v-model="reqType"
                :options="requestType"
                placeholder="数据源列表"
              ></multiselect>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="form-group">
              <label for="productname">接口路径</label>
              <b-form-input
                for="text"
                v-model="interfacePath"
                placeholder="请输入接口路径"
              ></b-form-input>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label for="productdesc">动态代码</label>
          <textarea class="form-control" id="productdesc" rows="5"></textarea>
          <textarea class="form-control" id="productdesc2" style="margin-top:24px;" rows="5"></textarea>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
import PageHeader from "@/components/page-header";
import Multiselect from "vue-multiselect";
export default {
  components: { Layout, PageHeader, Multiselect },
  data () {
    return {
      title: "接口管理",
      items: [
        {
          text: '接口管理',
          url: '/interface'
        },{
          text: '管理接口',
          url: '/interface/creatProject'
        }
      ],
      statData: [
        {
          title: "东大项目",
          icon: "ri-git-merge-line",
          value: "2022-01-22"
        },
        {
          title: "2个",
          icon: "ri-send-plane-line",
          value: "数据接口"
        },
        {
          title: "10,002次",
          icon: "ri-user-6-line",
          value: "被调用"
        },
        {
          title: "10",
          icon: "ri-user-6-line",
          value: "调用异常次数"
        }
      ],
      interfaceName: '',
      dataSource: ["MySQL-64-DS"],
      cooperation: '',
      requestType: ["GET", "POST"],
      reqType: '',
      interfacePath: '',
    }
  },
  methods: {
    
  }
}
</script>
<style lang="scss" scoped>

</style>
